<template>
	<view>
		<z-paging ref="paging" v-model="infoList" @query="queryList">
			<view slot="top">
				<view class="line"></view>
				<view class="timebg">
					<picker class="timetxt" mode="date" :value="date" :start="startDate" :end="endDate" fields="year"
						@change="bindDateChange">
						<view style="display: flex;align-items: center;">{{date}}
							<image src="../../../static/sanjiao.png" class="sanjiao"></image>
						</view>
					</picker>
				</view>
			</view>
			<view>
				<view class="plan_bg">
				</view>
				<view class="bg_view" v-if="infoList.length > 0">
					<text class="address">{{infoList[0].dwmc}}</text>
					<view class="view" style="margin-top: 28rpx;">
						<view class="circle"></view>
						<text class="view_title">节水代码：</text>
						<text class="view_data">{{jsdm}}</text>
					</view>
					<view class="view">
						<view class="circle"></view>
						<text class="view_title">最终计划(m³)：</text>
						<text class="view_data">{{infoList[infoList.length-1].allzzjh}}</text>
					</view>
				</view>
				<view style="width: 100%;margin-top: -125rpx;">
					<view class="view_list" v-for="item in infoList">
						<text class="itemtitle">{{item.title}}</text>
						<view class="line" style="margin-top: 24rpx;"></view>
						<view class="view" style="margin-top: 16rpx;height: 61rpx;">
							<view class="circle" style="background-color: #D9D9D9;"></view>
							<text class="title">用水定额标准</text>
							<text class="data">{{item.debz}}</text>
							<text class="unit">{{item.jldw}}</text>
						</view>
						
						<view class="view" style="margin-top: 16rpx;height: 61rpx;">
							<view class="circle" style="background-color: #D9D9D9;"></view>
							<text class="title">数量</text>
							<text class="data">{{item.sl}}</text>
						</view>
						
						<view class="view" style="margin-top: 16rpx;height: 61rpx;">
							<view class="circle" style="background-color: #D9D9D9;"></view>
							<text class="title">周期</text>
							<text class="data">{{item.zq}}</text>
						</view>
						
						<view class="view" style="margin-top: 16rpx;height: 61rpx;">
							<view class="circle" style="background-color: #D9D9D9;"></view>
							<text class="title">核定的用水定额计划</text>
							<text class="data" style="color: #1677FF;">{{item.dejh}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<suspended @userData="childData"></suspended>
	</view>
</template>

<script>
	
	import {GetYhDingEhs} from "../../../common/api.js"
	export default {
		data() {
			return {
				infoList: [],
				
				date: '年度',
				startDate: '1900',
				endDate: '2200',
				
				jsdm:getApp().globalData.jsdm
			}
		},


		methods: {

			bindDateChange(e) {
				console.log(e);
				this.date = e.target.value
				this.$refs.paging.reload();
			},

			async queryList(pageNo, pageSize) {
				if(this.date == '年度') {
					uni.showToast({
						title:'请选择查询年份！',
						icon:'none'
					})
					return
				}
				var data = {
					nd:this.date
				}
				let res = await GetYhDingEhs(data)
				this.$refs.paging.complete(res.response.Table1);
			},
			
			childData(param) {
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
	}

	.pageView {
		padding: 0 24rpx 0 24rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #f4f4f4;
	}

	.timebg {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.timetxt {
		width: 50%;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sanjiao {
		width: 20rpx;
		height: 14rpx;
		margin-left: 17rpx;
	}

	.select-lay {
		width: 60%;
		height: 100%;
		background: transparent;
	}

	.bg_view {
		height: auto;
		position: absolute;
		top: 24rpx;
		left: 48rpx;
		right: 48rpx;
	}

	.address {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 48rpx;
	}

	.circle {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #FFFFFF;
	}

	.view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24rpx;
	}

	.view_title {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 37rpx;
		margin-left: 16rpx;
	}

	.view_data {
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 42rpx;
		flex: 1;
		text-align: right;
	}

	.view_list {
		height: auto;
		background: #FFFFFF;
		border-radius: 17rpx;
		margin: 24rpx;
		padding: 24rpx 24rpx 16rpx 24rpx;
	}

	.itemtitle {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}

	.plan_bg {
		width: 100%;
		height: 327rpx;
		background-image: url('/static/plan_bg.png');
		background-size: 100% 100%;
	}

	.title {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 37rpx;
		margin-left: 17rpx;
	}

	.data {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 37rpx;
		flex: 1;
		text-align: right;
	}

	.unit {
		font-weight: 400;
		margin-left: 10rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 37rpx;
	}
	
	.timebg {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.timetxt {
		width: 50%;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.sanjiao {
		width: 20rpx;
		height: 14rpx;
		margin-left: 17rpx;
	}
</style>
